<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" oninput="inputHandler(event)" id="oInput">
        <br>
        <p id="p1"></p>
        <p id="p2"></p>
        <p id="p3"></p>
        <p id="p4"></p>
        <p id="p5"></p>
        <p id="p6"></p>
    </div>
    <script>
        //store 对象  (隐蔽的数据对象 = > 真正存储数据的地方)
        let store = {
            txt:""
        }    
        // obj 对象 (对外提供操作的对象)
        let obj = {}

        let p1 = document.getElementById('p1');
        let p2 = document.getElementById('p2');
        let p3 = document.getElementById('p3');
        let p4 = document.getElementById('p4');
        let p5 = document.getElementById('p5');
        let p6 = document.getElementById('p6');
        let oInput = document.getElementById('oInput');

        //定义一个输入框方法
        function inputHandler(e){
            console.log(e.target.value);
            let value = e.target.value;//获取输入框的值

            //修改obj.txt 属性值
            obj.txt = value;

            //逐个实现内容的修改 (要去实现的下一个业务)
            // p1.innerHTML = value;
            // p2.innerHTML = value;
            // p3.innerHTML = value;
        }

        //进一步处理数据的响应式更新 (数据劫持来处理)
        Object.defineProperty(obj , 'txt' , {
            get(){
                console.log('获取txt属性')
            },
            set(value){
                console.log('设置txt属性')
             p1.innerHTML = value;
             p2.innerHTML = value;
             p3.innerHTML = value;
             p4.innerHTML = value;
             p5.innerHTML = value;
             p6.innerHTML = value;
             oInput.value = value;
            }
        })
    </script>
</body>
</html>